<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>11画网格</title>
	<style type="text/css">
		#firCan {
			display: block;
			border: 1px solid gold;
			margin: auto;
		}
	</style>
</head>

<body>
	<canvas id="firCan" width="1000" height="500">
		<!--Canvas标签宽高默认值为 300*150-->
		当前浏览器版本过低 不支持 Canvas, 请升级!
		<!-- 
				IE 9+ 及其他浏览器都支持Canvas
				IE 9 以下, 可使用 Google 开发的 ExplorerCanvas 插件
			-->
	</canvas>
</body>
<script type="text/javascript">
	// 1, 获取 canvas标签
	var firCan = document.getElementById("firCan");
	// 2, 获取 2D渲染上下文
	var context = firCan.getContext('2d');

	// 获取canvas宽和高
	let Width = context.canvas.width;
	let Height = context.canvas.height;

	// 设置格子大小
	let gridSize = 20;

	// 线条宽度
	context.lineWidth = 1;

	// 网格颜色
	context.strokeStyle = "#DADADC";

	// 计算行数和列数
	let rows = Math.ceil(Height / gridSize);
	let cows = Math.ceil(Width / gridSize);
	console.log(rows, cows);

	// 画行
	for (let i = 1; i < rows; i++) {
		context.beginPath();
		context.moveTo(0.5, parseInt(i * gridSize) + 0.5);
		context.lineTo(Width + 0.5, parseInt(i * gridSize) + 0.5);
		context.stroke();
	}

	// 画列
	for (let i = 1; i < cows; i++) {
		context.beginPath();
		context.moveTo(parseInt(i * gridSize) + 0.5, 0.5);
		context.lineTo(parseInt(i * gridSize) + 0.5, Height + 0.5);
		context.stroke();
	}
</script>

</html>